<html>
  <head>
    <title>Grid Layout</title>
    <style>
    
      section {
        size:*; 
        flow:grid(1 1 1,
                  2 5 3,
                  4 4 4);
        border-spacing:8dip; /* defines spacing between cells */
      }
      
      section > * { text-align:center; vertical-align:middle; font-size:40dip; }
      
      section > header  { background:red; }
      section > nav  { background:orange; width:1.4em; }
      section > aside  { background:gold; width:1.4em; }
      section > main  { background:yellow; size:*; /* takes all available space */ }
      section > footer  { background:green; }
      
    </style>
    <script type="text/tiscript"></script>
  </head>
<body>

  <header>
    "Holy Grail" CSS layout ( BorderLayout in terms of Java.AWT ) expressed as flow:grid;
  </header>
  <pre>flow:grid(1 1 1,
          2 5 3,
          4 4 4);</pre>
  <section>
    <header>1</header>
    <nav>2</nav>
    <aside>3</aside>
    <footer>4</footer>
    <main>5</main>
  </section>

</body>
</html>
